<template>
	<view class="page-box">
		<view class="pad-30">
			<view class="bg-white radius24 pad-left-right-30 pad-top-30">
				<view class="centerXY border">
					<ling-imgcropper :src="tempFilePath" @confirm="myUpload" @cancel="cancel"></ling-imgcropper>
					<image v-if="cropFilePath == ''" :src="defaultAvatar" class="avatar" mode="widthFix"></image>
					<image v-else :src="cropFilePath" @tap="upload" class="avatar"></image>
				</view>
				<up-cell-group :border="false">
					<up-cell :titleStyle="titleStyle" title="昵称" isLink @click="nameEidt = true">
						<template #value>
							<view class="centerXY">
								<view class="multi1 font-28">{{userInfo.nickname}}</view>
							</view>
						</template>
					</up-cell>
					<up-cell :titleStyle="titleStyle" title="手机号" :value="userInfo.tel"></up-cell>
					<!-- <up-cell :titleStyle="titleStyle" :border="false" title="实名信息" isLink value="未实名，去认证"></up-cell> -->
					<!-- <up-cell @click="hanldeAddress" :titleStyle="titleStyle" title="常用地址" isLink value="管理"></up-cell> -->
					<up-cell @click="hanldeEditPassword" :titleStyle="titleStyle" :border="false" title="登录密码" isLink
						value="修改"></up-cell>
				</up-cell-group>
			</view>

			<my-popup content="您确定退出吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
			<up-button textSize="10rpx" @click="hanldeSignout"
				:customStyle="{color: '#0055FE',width:'500rpx',height:'96rpx',borderRadius:'50rpx',border: '2rpx solid #0055FE',marginTop: '300rpx' }"
				class="button" color="#0055FE" type="primary" :plain="true" :hairline="true" text="退出登录">
				<view class="flex align-center">
					<image class="exit-icon" src="/static/image/signOut.png" mode=""></image>
					<text class="mar-left-10">退出登录</text>
				</view>
			</up-button>
		</view>

		<up-popup :customStyle="customStyles" round="15" :show="nameEidt" mode="center">
			<view class="pad-30">
				<view class="text-center font-40">修改昵称</view>
				<view class="text-center pad-30 content font-28">
					<up-input placeholder="请输入新昵称" clearable border="surround" v-model="upInfo.nickname"></up-input>
				</view>
				<view class="betweenX gap60">
					<view @click="nameEidt =false" class="flex-w color-theme radius50 pad-top-bottom-15  text-center">取消
					</view>
					<view @click="hanldeUserConfirm"
						class="flex-w bg-theme color-white radius50 pad-top-bottom-15 button-style text-center">
						确认
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { getBaseInfo, updateBaseInfo } from '@/api/index.js'
	import { uploadFile } from '@/api/currency.js'
	import { dataReportFun } from '@/util/dataReport.js'
	import util from '@/util/util.js';
	import { image } from 'uview-plus/libs/function/test';
	import { postMultiGet } from '@/api/currency.js'

	const titleStyle = ref({
		color: '#7a7a7a',
		padding: '10rpx 0'
	})

	const nameEidt = ref(false);
	// 弹窗样式
	const customStyles = ref({
		width: '650rpx',
		height: '400rpx'
	});

	const upInfo = ref({
		nickname: '',
		avatar: ''
	});

	const tempFilePath = ref("");
	const cropFilePath = ref("");
	const upload = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album"], //从相册选择
			success: (res) => {
				tempFilePath.value = res.tempFilePaths.shift();
			},
		});
	}

	const myUpload = async (e) => {
		tempFilePath.value = "";
		cropFilePath.value = e.detail.tempFilePath;
		uni.uploadFile({
			url: 'https://file.xyljz.cn/file/upload/one', //仅为示例，非真实的接口地址
			filePath: cropFilePath.value,
			method: 'POST',
			name: 'file',
			header: {
				'w-token': uni.getStorageSync('jwt_token').token || '',
				'w-client-lang': 'zh_CN',
				'w-client-os': await util.getClient(),
				'w-client-version': '1.0.0',
				'w-client-business': '1',
				"w-client-id": uni.getStorageSync('wClientId'),
			},
			success: (res) => {
				console.log(res.data)
				upInfo.value.avatar = JSON.parse(res.data).data.url;
				hanldeUserConfirm();
			}
		});
	}

	const cancel = () => {
		tempFilePath.value = "";
	}

	// 修改昵称
	const hanldeUserConfirm = () => {
		updateBaseInfo(upInfo.value).then(res => {
			if (res?.code == 200) {
				getUserInfo();
				nameEidt.value = false;
			}
		})
	}

	onLoad((option) => {
		dataReportFun({
			event: "client.page_view",
		})
	})

	// 退出登录
	const isPopup = ref(false);
	const hanldeSignout = () => {
		isPopup.value = true;
	}

	// 确认退出
	const hanldeConfirm = () => {
		uni.removeStorageSync('jwt_token');
		uni.removeStorageSync('refresh_token');
		uni.removeStorageSync('userId');
		uni.reLaunch({
			url: '/pages/login/login'
		})
	}

	// 获取个人信息
	const userInfo = ref({});
	const getUserInfo = () => {
		getBaseInfo().then(res => {
			if (res?.code == 200) {
				userInfo.value = res.data.info;
				upInfo.value.nickname = res.data.info.nickname;
				cropFilePath.value = res.data.info.avatar;
			}
		})
	}

	// 修改Miami
	const hanldeEditPassword = () => {
		uni.navigateTo({
			url: '/pages/my_actions/editPassword/editPassword'
		})
	}
	
	const defaultAvatar = ref("");
	const getPostMultiGet = () => {
		postMultiGet({ codes: ['user_default_avatar'] }).then(res => {
			defaultAvatar.value = res.data.lists.user_default_avatar;
		})
	}

	onShow(() => {
		getUserInfo();
		getPostMultiGet();
	})

	// 跳转地址列表
	const hanldeAddress = () => {
		uni.navigateTo({
			url: '/pages/address/list'
		})
	}
</script>

<style lang="scss" scoped>
	.avatar {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.exit-icon {
		width: 26rpx;
		height: 26rpx;
	}

	.u-slot-value {
		width: 400rpx;
	}

	.copy {
		display: block;
		width: 40rpx;
		height: 40rpx;
	}

	.button> ::v-deep .u-button__text {
		font-size: 32rpx !important;
	}

	.content {
		height: 200rpx
	}

	.color-theme {
		border-radius: 50rpx;
		border: 1rpx solid $uni-color-primary;
	}
</style>